﻿@{
    ViewBag.Title = "Cấu hình sản phẩm trong kho";
}
<div class="panel panel-default">
    <div class="panel-heading">
        Danh sách Sản phẩm
    </div>
    <!-- /.panel-heading -->
    <div class="panel-body">
        <div class="form-group input-group">
            <span class="input-group-addon">Hãy chọn kho</span>
            <select id="SearchKho" class="form-control">
                <option value=""></option>
                @foreach (var kho in ViewBag.KhoID)
                {
                    <option value="@kho.Value">@kho.Text</option>
                }
            </select>
            <span class="input-group-btn">
                <button class="btn btn-primary" disabled id="btnUpdate" data-toggle="modal" data-target="#dialog-ConfimUpdate" >Cập nhật danh sách</button>
            </span>
        </div>
        <div class="dataTable_wrapper">
            <table class="table table-striped table-bordered table-hover" id="dataTableView">
                <thead>
                    <tr>
                        <th>Trong Kho</th>
                        <th>ID</th>
                        <th>Mã Sản Phẩm</th>
                        <th>Tên Sản Phẩm</th>
                    </tr>
                </thead>
            </table>
        </div>
        <!-- /.table-responsive -->
    </div>
    <!-- /.panel-body -->
</div>
<div class="modal fade" id="dialog-ConfimUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                Bạn có chắc chắn muốn cập nhật danh sách sản phẩm trong kho [<span class="spanKhoConfirmUpdate"></span>]?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Hủy bỏ</button>
                <button type="button" class="btn btn-primary" id="buttonModalConfirmUpdate">Đồng ý</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/bootstraptablejs")
    @Styles.Render("~/bundles/bootstraptablecss")
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#dataTableView').DataTable({
                responsive: true,
                bProcessing: true,
                "iDisplayLength": 15,
                "language": {
                    "lengthMenu": 'Hiển thị <select><option value="15">15</option><option value="30">30</option><option value="50">50</option><option value="-1">All</option></select> bản ghi',
                    "info": "Hiển thị từ _START_ đến _END_ trên tổng số _TOTAL_ bản ghi",
                    "infoEmpty": "Không có bản ghi nào thỏa mãn",
                    "emptyTable": "Không có dữ liệu",
                    "search": "Tìm kiếm ",
                    "paginate": {
                        "previous": "Trang trước",
                        "next": "Trang sau"
                    }
                },
                "ajax": "@Url.Action("IndexGet")",
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            if (data["IsInKho"]) {
                                return '<input type="checkbox" checked="checked" class="chkIsInKho" id="chkIsInKho' + data["ID"] + '" />';
                            }
                            else {
                                return '<input type="checkbox" class="chkIsInKho" id="chkIsInKho' + data["ID"] + '" />';
                            }
                        },
                        "targets": 0
                    },
                    { "visible": true, "targets": 1 }
                ],
                "columns": [
                    {
                        "className": 'view-details-edit',
                        "orderable": false,
                        "data": null,
                        "bSearchable": false,
                        "defaultContent": ''
                    },
                    { "data": "ID", "bSearchable": false },
                    { "data": "MaSP" },
                    { "data": "TenSP" }
                ],
                "order": [[2, "asc"]]
            });

            $('#SearchKho').change(function (event) {
                $("#btnUpdate").attr("disabled", '');
                if ($(this).val() != '') {
                    $(this).attr("disabled", '');
                    table.ajax.url('@Url.Action("IndexGet")' + "/" + $(this).val()).load(function (data) {
                        $("#btnUpdate").removeAttr("disabled");
                        $("#SearchKho").removeAttr("disabled");
                    });
                }
            });

            $('#dialog-ConfimUpdate').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var modal = $(this);
                modal.find('span.spanKhoConfirmUpdate').html($("#SearchKho").val());
                modal.find('#buttonModalConfirmUpdate').on('click', function (e) {
                    var chk = '';
                    var rowss = table.rows().nodes(); ////Get all rows in datatable, because only can get checkbox in current page
                    var leng = rowss.length;
                    for (var i = 0; i < leng; i++) {
                        ////hacking code to get checkbox control
                        var ctrl = rowss[i].cells[0].children[0];
                        if (ctrl.checked) {
                            chk += ctrl.id.replace("chkIsInKho", "") + '#';
                        }
                    }
                    var dataFields = 'chk=' + chk + '&khoid=' + $("#SearchKho").val();

                    $.ajax({
                        url: '@Url.Action("Index")',
                        type: 'POST',
                        data: dataFields,
                        dataType: 'json',
                        success: function (response) {
                            if (response["msg"] == "success") {
                                location.reload();
                            }
                            else {
                                alert('Có lỗi trong quá trình cập nhật.' + response["msg"]);
                            }
                        },
                        error: function () {
                            alert('Có lỗi');
                        }
                    });
                });
            });
            $('#dialog-ConfimUpdate').on('hidden.bs.modal', function (event) {
                var modal = $(this);
                modal.find('#buttonModalConfirmUpdate').unbind();
            });
        });
    </script>
}
